import { StyleSheet, Text, View } from 'react-native'
import React, { useEffect, useState } from 'react'
import GoodsList from '../components/Goods/GoodsList'
import axios from '../axios'
import FilterSheet from '../components/Goods/FilterSheet'
import Search from '../components/Search'

const GoodsResult = ({ navigation, route }) => {
  let { keyword: routeKeyword, category: routeCategory } = route.params
  console.log('routeKeyword', routeKeyword)
  const [list, setList] = useState([])
  const [status, setStatus] = useState('loading')
  const [query, setQuery] = useState({
    index: 1,
    size: 6,
    category: routeCategory || '',
    keyword: routeKeyword || '',
    sort: '',
    sortName: ''
  })

  const filterIndex = {
    price: [{
      name: '默认排序',
      sort: null
    },
    {
      name: '价格高到低',
      sort: -1
    },
    {
      name: '价格低到高',
      sort: 1
    }
    ],
    date: [
      {
        name: '日期',
        sort: null
      },
      {
        name: '日期高到低',
        sort: -1
      },
      {
        name: '日期低到高',
        sort: 1
      }
    ]
  }
  const onSubmitEditing = (e) => {
    console.log(e.nativeEvent.text)
  }
  useEffect(() => {
    navigation.setOptions({
      headerTitle: () => <Search defaultValue={routeKeyword} onSubmitEditing={onSubmitEditing} />
      // headerSearchBarOptions: {
      //   // search bar options
      //   autoFocus: false,
      //   // hideNavigationBar: false,
      //   placeholder: '请输入标题关键词',
      //   onBlur: (e) => {
      //     console.log('onBlur')
      //   },
      //   onCancelButtonPress: () => {
      //     console.log('onCancelButtonPress')
      //   },
      //   onChangeText: (event) => setKeyword(event.nativeEvent.text),
      //   onsubmit: () => {
      //     console.log('onsubmit')
      //   }
      // }
    })
  }, [navigation])
  useEffect(() => {
    axios.get(`/fan/goods`, query).then(res => {
      setList([...list, ...res.data.records])
      if (res.data.records.length < query.size) setStatus('noMore')
      else setStatus('more')
      setTimeout(() => {
        setRefreshing(false)
      }, 200)
    }).catch(err => { })
  }, [query])

  const onEndReached = () => {
    console.log('到底了')
    if (status === 'noMore') return
    setStatus('loading')
    setQuery({
      ...query,
      index: query.index + 1
    })
  }
  const indexChange = (data) => {
    console.log('indexChange', data)
    setList([])
    setQuery({
      ...query,
      sortName: 'price',
      sort: filterIndex['price'][data['price']].sort,
      index: 1
    })
  }
  const [refreshing, setRefreshing] = useState(false)
  const onRefresh = (e) => {
    console.log('onRefresh', e)
    setRefreshing(true)
    setList([])
    setQuery({
      ...query,
      index: 1
    })
  }
  return (
    <View style={styles.container}>
      <FilterSheet data={filterIndex} onChange={indexChange}></FilterSheet>
      <GoodsList data={list} onEndReached={onEndReached} status={status}
        numColumns={2} refreshing={refreshing} onRefresh={onRefresh}
      ></GoodsList>
    </View>
  )
}

export default GoodsResult

const styles = StyleSheet.create({
  container: {
    // paddingHorizontal: 10
    flex: 1,
    // backgroundColor: 'red'
  }
})